<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>刮刮乐抽奖</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css">
		<script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
		<script src="../js/mui.min.js"></script>
		<style type="text/css">
			#redux{
				top: 0;
				left:0;
				width: 20rem;
				height: 12rem;
			}
			html,body{
				width: 100%;
				height: 100%;
				margin:0;
				padding: 0;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="../css/base.min.css">
	</head>

	<body class="main_box">
		<div class="box">
			<div class="bg_in">
				<!-- <div class="title">•&nbsp;刮奖区&nbsp;•</div> -->
			</div>
			<div class="content">
				<div id="mask_img_bg"><img  src="../img/price.png" /></div>
				<img id="redux" src="../img/mask-img.jpg" />
			</div>
		</div>
		<div class="show">
			<img class="show_bg" src="../img/ok.png">
			<img class="show_bg1" src="../img/ok2.png">
			<!-- <img class="show_food" src="../img/mask_img_bg1.jpg" /> -->
			<a class="close"></a>
			<a class="btn">确定</a>
		</div>
		<div class="mask"></div>
		<script type="text/javascript" src="../js/jquery.eraser.js" ></script>
		<script>
			$(window).load(function  () { //这个适用手机端，等图片加载完再显示，因为有可能会出现第一次加载图片没有加载完就不会出现canvas
				$('#redux').eraser( {
					size: 20,   //设置橡皮擦大小
					completeRatio: .4, //设置擦除面积比例
					completeFunction: showResetButton   //大于擦除面积比例触发函数
				});
				function showResetButton(){
					$(".main_box .show,.main_box .mask").fadeIn(300)
				}
				$(".main_box .mask,.main_box .show .close,.main_box .show .btn").click(function  () {
					$(".main_box .show,.main_box .mask").fadeOut(300)
				})
				// 随机数判断是否中奖
				var random=Math.random();
				var prizeNumber=10;
				// 当前日期
				//获取最近3天日期
				// console.log(getDay(0));//当天日期
				// console.log(getDay(7));//3天前日期
				// function getDay(day){
				//     var today = new Date();
				//     var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
				//     today.setTime(targetday_milliseconds); //注意，这行是关键代码
				//     var tYear = today.getFullYear();
				//     var tMonth = today.getMonth()+1;
				//     var tDate = today.getDate();
				//     return tYear+"-"+tMonth+"-"+tDate;
				// }
				// 判断当前时间是否在该时间段
			
				var arrDate=["2020/04/18 8:00;2020/04/24 18:00","2020/04/24 18:00;2020/05/02 18:00","2020/05/02 18:00;2020/05/09 18:00","2020/05/09 18:00;2020/05/17 18:00"];
			
					var curDate = new Date();
					beginDate0 = new Date(arrDate[0].split(";")[0]),
		            endDate0 = new Date(arrDate[0].split(";")[1]);
		            beginDate1 = new Date(arrDate[1].split(";")[0]),
		            endDate1 = new Date(arrDate[1].split(";")[1]);
		            beginDate2 = new Date(arrDate[2].split(";")[0]),
		            endDate2 = new Date(arrDate[2].split(";")[1]);
		            beginDate3 = new Date(arrDate[3].split(";")[0]),
		            endDate3 = new Date(arrDate[3].split(";")[1]);
		            // debugger
		             if (curDate >= beginDate0 && curDate <= endDate0) {
			            console.log(100)

			        }else if(curDate >= beginDate1 && curDate <= endDate1){
			        	console.log(100)
			        }
			        else if(curDate >= beginDate2 && curDate <= endDate2){
			        	console.log(100)
			        } else if(curDate >= beginDate3 && curDate <= endDate3){
			        	console.log(300)
			        }
		
				
				// isDuringDate(arrStart[index], arrEnd[index]);
				// date.isDuringDate('2020/04/09 8:00', '2020/04/18 18:00');
				if(random>=0&&random<=0.5){
					console.log("未中奖")
					$("#mask_img_bg").find("img").attr("src","../img/price1.png");
					$(".show").find("img.show_bg").attr("src","../img/ok1.png");
				}else{
					console.log("中奖");
					$("#mask_img_bg").find("img").attr("src","../img/price.png");
					$(".show").find("img.show_bg").attr("src","../img/ok.png");
				}

			})
			
		</script>	
	</body>

</html>